<template>
  <view class="hpv-choose">
    <view>
      <view class="hpv-type">{{ hpvData.name }}</view>
      <view class="hpv-age">
        <text v-for="(m, i) in hpvData.describe" :key="i">{{ m }}</text>
      </view>
    </view>
    <view class="hpv-price"
      >¥{{ hpvData.price[0] }}-¥{{ hpvData.price[1] }}</view
    >
  </view>
  <!-- 表单填写 -->
  <view class="xinguan-view">
    <view class="xinguan-flex">
      <text>真实姓名</text>
      <input placeholder="请输入真实姓名" placeholder-class="input-style" />
    </view>
    <view class="xinguan-flex">
      <text>身份证</text>
      <input placeholder="请输入身份证" placeholder-class="input-style" />
    </view>
    <view class="xinguan-flex">
      <text>性别</text>
      <picker
        mode="selector"
        :range="['男', '女']"
        class="flex-left"
        @change="changeSelector"
      >
        <view>
          <text>请选择性别</text>
          <image src="/static/other/gengduo.svg"></image>
        </view>
      </picker>
    </view>
    <view class="xinguan-flex">
      <text>出生日期</text>
      <picker mode="date" class="flex-left" @change="changeDate">
        <view>
          <text>请选择出生日期</text>
          <image src="/static/other/gengduo.svg"></image>
        </view>
      </picker>
    </view>
    <view class="xinguan-flex">
      <text>手机号</text>
      <input
        placeholder="请输入手机号"
        type="number"
        placeholder-class="input-style"
      />
    </view>
  </view>
  <!-- 选择套餐 -->
  <view class="combo-view">
    <block>
      <text class="combo-title">套餐名称</text>
      <view class="combo-list">
        <text
          v-for="(item, index) in ['疫苗', '疫苗+HPV筛选']"
          :key="index"
          :class="index == 0 ? 'checkstyle' : ''"
          @click="changCombo()"
          >{{ item }}</text
        >
      </view>
    </block>
    <!-- 接种时间 -->
    <block>
      <text class="combo-title">预约接种时间}</text>
      <view class="combo-list">
        <text
          v-for="(item, index) in ['现货7天', '现货30天', '现货10天']"
          :key="index"
          :class="index == 0 ? 'checkstyle' : ''"
          @click="changTime()"
          >{{ item }}</text
        >
      </view>
    </block>
  </view>
  <!-- 提交 -->
  <view style="height: 300rpx"></view>
  <view class="Total-view">
    <text>合计：¥1000</text>
    <text @click="subMit">提交</text>
  </view>
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { onMounted, reactive, watch, toRefs } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { reqReshpv } from "@/serve/api";
import { hpvDataType, hpvResType } from "@/types/index";

// 2.定义页面响应式数据
let pageData = reactive({
  hpvData: {} as hpvDataType, //hpv详情数据
});
// 3.批量解构创建响应式数据
let { hpvData } = toRefs(pageData);

//获取数据
onMounted(async () => {
  let res = await reqReshpv()
  console.log(res);
});
// 4.获取页面跳转传递的数据
onLoad((options: any) => {
  pageData.hpvData = JSON.parse(options.value);
});

</script>
  
  
<style>
/* 表单提交 */
@import url("../../common-style/form.css");

page {
  background-color: #fafafa;
}

.hpv-choose {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 40rpx;
}

.hpv-type {
  font-size: 35rpx;
}

.hpv-age {
  display: flex;
  align-items: center;
}

.hpv-age text {
  background-color: #f4f6fa;
  padding: 7rpx;
  font-size: 25rpx;
  margin: 10rpx 10rpx 10rpx 0;
}

.hpv-price {
  font-weight: bold;
  color: #ff5f2c;
}

/* 套餐 */
.combo-view {
  background-color: #ffffff;
  padding: 20rpx;
  margin: 20rpx 0;
}

.combo-title {
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.combo-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.combo-list text {
  padding: 20rpx 40rpx;
  background-color: #f5f5f5;
  margin: 0 20rpx 20rpx 0;
  border-radius: 10rpx;
  display: block;
}

/* 选中加上样式 */
.checkstyle {
  background-color: #2c76ef !important;
  color: #ffffff !important;
}
</style>